<template>
	<tm-fullView>
		<tm-menubars title="黑色遮罩" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				基础示例
			</view>
			<tm-button @click="show=true;">显示遮罩</tm-button>
			<tm-maskFlow v-model="show"></tm-maskFlow>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-50">
				遮罩中旋转内容
			</view>
			<tm-button theme="bg-gradient-blue-accent" @click="show1=true;">显示遮罩内容</tm-button>
			<tm-maskFlow v-model="show1">
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-50">
						这是内容。
					</view>
			
				</tm-sheet>
			</tm-maskFlow>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmMaskFlow from "@/tm-vuetify/components/tm-maskFlow/tm-maskFlow.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmMaskFlow},
		data() {
			return {
				show:false,
				show1:false,
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
